| Vue Element UI 图片上传 | 您所在的位置：网站首页 › vue 上传图片组件 › Vue Element UI 图片上传 |
Vue Element UI 图片上传
|
Vue Element UI 图片上传
ElementUI upload组件上传图片，多看看文档参数，基本没什么难度，我总结以下个人的需求。文档里面其实都有说明，我这边给出使用例子，方便他人。 参照ElementUI官网: https://element.eleme.cn/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan 上传权限验证 (需要heades里面加上token) 预览上传图片(这个其实就很简单了, 我没仔细看文档)
上传headers添加token
由于我接口限制了headers token验证，所以上传得添加， 文档里面有说明一个 headers属性, 所以在计算属性添加 xxxx xxx computed:{ headers() { // 上传图片添加请求头header return { 'token': getToken() // 从本地获取token就行 } } } 上传回调处理首先我上传回调json数据是一下格式 { "code": 200, "message": "success", "data": { "image": "xxxx" } }上传回调函数有两个默认参数， 第一个是请求响应，第二个是图片文件信息。 xxxx xxx methods:{ handleAvatarSuccess(res, file) { // 处理上传图标 if (res.code === 200) { this.icon_url = res.data.image } else { this.$message.error(`图片上传失败:${res.message}`) } } } 完整代码 限制上传一张, 只能上传jpg/png文件，且不超过500kb import { getToken } from '@/utils/auth' export default { name: 'CategoryView', data() { return { icon_url: "" // 默认url }, computed:{ headers() { // 上传图片添加请求头header return { 'token': getToken() // 从本地获取token就行 } }, fileArr() { // 上传图片 显示默认图片 return this.form.icon_url ? [{ url: this.form.icon_url }] : [] } }, methods: { handleAvatarSuccess(res, file) { if (res.code === 200) { this.icon_url = res.data.image } else { this.$message.error(`图片上传失败:${res.message}`) } } } } 在tab表格中的完整代码以上代码还不算特别完整，tab表格代码见个人博客 |
【本文地址】
公司简介
联系我们